<template>
	<h1>学习vue</h1>
	
	<el-divider>双绑 start</el-divider>
		<el-form :model="form" style="width: 200px;">
			<el-input v-model="form.text" autofocus @keyup.enter="alerts('你好')"></el-input>
		</el-form>
		{{form.text}}
		<div class="static" v-bind:class="{ 'class-a': isA, 'class-b': !isA }">aaa</div>
		<div class="static" v-bind:class="['a','b']">bbb</div>
		<div class="static" v-bind:class="[isA ?? 'a', {'class-a': isA}]">bbb</div>
	<el-divider>双绑 end</el-divider>
	
	<el-divider>计算属性 start</el-divider>
		<li v-for="n in evenNumbers">{{ n }}</li>
	<el-divider>计算属性 end</el-divider>
	
	<!-- 这里我通过度娘解决了问题， 错误是，，哈哈想不起来就再找，不给提示？config -->
	<el-divider>组件 start</el-divider>
		<div>
			<button-counter></button-counter>
			<button-counter></button-counter>
			<button-counter></button-counter>
		</div>
	<el-divider>组件 end</el-divider>
	
	<el-divider>组件绑定 start</el-divider>
		<ol>
			<lis v-for="i in lis" :lis="i" :title="i.title" :key="i.id"></lis>
		</ol>
	<el-divider>组件绑定 end</el-divider>
	
	<h1>接下来进入深入学习，尝试修改框配置name:LhApp</h1>
	<h2>我将会重写main.js</h2>
	藕又回来啦，因为呢，深入也是表层， 我去study2了
</template>
<script>
	
	
	const ButtonCounter = {
	  data() {
	    return {
	      count: 0
	    }
	  },
	  template: `
	    <button v-on:click="count++" >
	      You clicked me {{ count }} times.
	    </button>`
	}
	const lis = {
		props: ['lis','title'],
		template: '<li :title="title">{{lis.text}}</li>'
	}
	
	// import BaseLabel from '../components/BaseLabel.vue'
	export default{
		components: {
		  'button-counter': ButtonCounter,
			'lis': lis,
		},
		data(){
			return {
				numbers: [ 1, 2, 3, 4, 5 ],
				form: {
					text: '你好'
				},
				isA: true,
				
				// 数组绑定
				lis: [
					{ id: 0, text: 'Vegetables', title: '标题一' },
					{ id: 1, text: 'Cheese', title: '标题两' },
					{ id: 2, text: 'Whatever else humans are supposed to eat', title: '标题参' }
				]
			}
		},
		computed: {
		  evenNumbers: function () {
		    return this.numbers.filter(function (number) {
		      return number % 2 === 0
		    })
		  }
		},
		methods:{
			alerts(res){
				alert(res)
			},
		}
	}
</script>

<style>
	.class-a{
		background-color: red;
	}
	.class-b{
		background-color: green;
	}
	.a{
		color: blue;
	}
	.b{
		color: #00FFFF;
	}
	.demo {
	  font-family: sans-serif;
	  border: 1px solid #eee;
	  border-radius: 2px;
	  padding: 20px 30px;
	  margin-top: 1em;
	  margin-bottom: 40px;
	  user-select: none;
	  overflow-x: auto;
	}
</style>
